<template>
	<view class="sureorders">
		<view class="sureorders-top">
			<image class="sureorders-topphoto" src="../../static/定位.png" mode=""></image>
			<view class="sureorders-toptext">
				<text class="sureorders-toptext1">{{ nickName }}</text>
				<text class="sureorders-toptext2">江苏省南京市玄武区中国南京软件谷XX路18号XX云楼N13食堂B1楼小厨娘</text>
			</view>
		</view>
		<view class="sureorders-middle">
			<!-- 展示商品名称 -->
			<view class="sureorders-middleall">
				<text class="middle-product-name">{{ product.name }}</text>
				<!-- 展示商品描述 -->
				<text class="middle-product-description">{{ product.description }}</text>
				<!-- 展示商品价格 -->
				<text class="middle-product-price">￥{{ product.price }}</text>
				<text class="middle-product-number">x1</text>
			</view> 
			      <!-- 展示商品图片 -->
			      <image :src="product.url" class="middle-product-image" mode="aspectFit"></image>
				  <view class="sureorders-middletext1">
				  	<text>配送</text>
				  	<text>标准配送</text>
				  </view>
				  <view class="sureorders-middletext2">
				  <text>发票</text>
				  <text>普通发票</text>
				  </view>
		</view>
		<view class="sureorders-bottom">
		      <text class="sureorders-bottomprice">￥{{ product.price }}</text>
		      <button class="submit-order-btn" @click="submitOrder">提交订单</button>
		    </view>
		  </view>
		</template>

<script>
export default {
  data() {
    return {
      product: {}, // 存储商品信息
      nickName: '' // 新增，用于存储昵称
    };
  },
  onShow() {
    // 从本地存储中获取商品数据
    const product = uni.getStorageSync('product');
    if (product) {
      this.product = product;
      console.log("Received product data:", product);
    } else {
      console.log("No product data received");
    }

    // 新增：从本地存储中获取昵称
    this.nickName = uni.getStorageSync('nickName') || '未登录'; // 如果没有昵称，默认
  },
  methods: {
    submitOrder() {
      console.log("Submitting order for product:", this.product);
      // 将商品数据转换为字符串并进行编码
      const productData = encodeURIComponent(JSON.stringify(this.product));
      // 跳转到 pay.vue 页面，并带上商品数据作为查询参数
      uni.navigateTo({
        url: `/pages/pay/pay?productData=${productData}`, // 确保pay.vue页面路径在app.json中已正确配置
        success: function() {
          console.log("Successfully navigated to pay.vue");
        },
        fail: function(err) {
          console.error("Failed to navigate to pay.vue", err);
        }
      });
    }
    // 其他方法可以继续添加
  }
};
</script>


<style>
	.sureorders{
		display: flex;          /* 使用 flexbox 布局 */
	    flex-direction: column; /* 子元素垂直排列 */
		position: relative;
		background-color: #f2f4f5; /* 背景颜色 */
		min-height: 100vh; 
	}
	.sureorders-top{
		position: relative;
		border-radius: 30rpx;
		background-color: white;
		height: 140rpx;
		margin: 0 15rpx 0 15rpx;
		margin-top: 30rpx;
	}
	.sureorders-topphoto{
		position: absolute;
		width:40rpx ;
		height:40rpx ;
		top: 35%;
		left: 20rpx;
	}
	.sureorders-toptext{
		position: absolute;
		display: flex;
		flex-direction: column;
		top: 20rpx;
	}
	.sureorders-toptext1{
		padding-left: 80rpx;
		font-size: 30rpx;
	}
	.sureorders-toptext2{
		padding-left: 80rpx;
		font-size: 20rpx;
	}
	.sureorders-middle{
		position: relative;
		border-radius: 30rpx;
		background-color: white;
		height: 450rpx;
		margin: 0 15rpx 0 15rpx;
		margin-top: 30rpx;
	}
	.sureorders-middletext1,
	.sureorders-middletext2 {
	  display: flex;
	  justify-content: space-between;
	  font-size: 20rpx;
	  padding: 10rpx 0; /* 垂直内边距，水平内边距可去掉或减小 */
	  width: 100%;
	  position: absolute;
	}
	
	.sureorders-middletext1 {
	  top: 300rpx;
	}
	
	.sureorders-middletext2 {
	  top: 350rpx;
	}
	
	/* 为配送文本添加伪元素横线 */
	.sureorders-middletext1::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 0; /* 根据文本实际左对齐的位置调整 */
	  right: 0; /* 根据文本实际右对齐的位置调整，或者使用width来指定横线宽度 */
	  height: 1rpx; /* 横线高度 */
	  background-color: #999; /* 横线颜色 */
	}
	
	/* 确保text组件内的内容不要靠边 */
	.sureorders-middletext1 text,
	.sureorders-middletext2 text {
	  padding: 0 50rpx; /* 根据需要调整内边距 */
	  /* 可以添加box-sizing: border-box; 确保padding不影响宽度 */
	}
	.sureorders-middleall{
		display: flex;
		flex-direction: column;
		padding-left: 240rpx;
	}
	.middle-product-name {
	  position: absolute;
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333;
	  top: 10rpx;
	}
	
	.middle-product-description {
	  position: absolute;
	  font-size: 20rpx;
	  color: #666;
	  top: 100rpx;
	}
	
	.middle-product-price {
	  position: absolute;
	  font-size: 30rpx;
	  color: #e64340;
	  top: 160rpx;
	}
	.middle-product-number{
		position: absolute;
		font-size: 25rpx;
		color: #666;
		top: 165rpx;
		right: 20rpx;
	}
	.middle-product-image {
	  position: absolute;
	  width: 100%;
	  border-radius: 10rpx;
	  width: 200rpx;
	  height: 200rpx;
	  top: 1rpx;
	  left: 1rpx;
	}
	.sureorders-bottom {
	  position: relative;
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #f2f4f5; /* 背景颜色 */
	  height: 130rpx; /* 高度 */
	  border-top: 1rpx solid grey; /* 上边框线 */
	  display: flex;
	  justify-content: center; /* 水平居中 */
	  align-items: center; /* 垂直居中 */
	  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.15); /* 阴影效果 */
	  /* 确保没有其他背景颜色设置覆盖了按钮的背景色 */
	}
	.sureorders-bottomprice{
		position: absolute;
		color: red;
		font-size: 50rpx;
		left: 20rpx;
		top: 28rpx;
	}
	.submit-order-btn {
	  position: absolute;
	  right: 30rpx;
	  background-color: #e64340; /* 确保红色背景 */
	  color: white; /* 文字颜色 */
	  font-size: 36rpx; /* 字体大小 */
	  height: 70rpx; /* 高度 */
	  line-height: 70rpx; /* 行高，使文本垂直居中 */
	  text-align: center; /* 文本水平居中 */
	  border-radius: 35rpx; /* 圆角 */
	  padding: 0 40rpx; /* 左右内边距 */
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15); /* 按钮阴影 */
	  /* 确保按钮的背景色不会被其他元素的背景色影响 */
	}
</style>